<template>
  <div class="publish">
    <van-nav-bar
    title="发布"
    placeholder
    fixed
    />

     <van-form @submit="onSubmit">
      <van-field
        v-model="title"
        name="title"       
        label="标题"
        placeholder="标题"
        label-width = "50px"
        :rules="[
          { required: true, message: '请填写标题' },
        ]"
      />

      <van-field
        :value="cate_name"   
        name="cate_name" 
        label="分类"
        placeholder="请选择分类"
        readonly
        label-width = "50px"
        @click="catePickerShow = true"
      />

      <van-field
        v-model="content"
        name="content"       
        label="内容"
       label-width = "50px"
        placeholder="内容"
       type="textarea"
        :rules="[
          { required: true, message: '请填写内容' },
        ]"
      />

      <!-- 上传 -->
      <van-field  label="图片" label-width = "50px" name="fileList">
        <template #input>
           <van-uploader v-model="fileList"  multiple :max-size="500 * 1024" :max-count="3" />
        </template>
      </van-field>

     

        <div style="margin: 16px;">
        <van-button block type="info" color='#07c160' native-type="submit">提交</van-button>
        </div>
     </van-form>


    <!-- 弹出层 -->
    <van-popup
      v-model="catePickerShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
    <van-picker
      title="请选择"
      show-toolbar
      :columns="cate"
      @confirm="onConfirm"
      @cancel="catePickerShow = false"
      value-key="name"
    />
    </van-popup>
    


    <!-- <div style="margin: 16px;">
        <van-button block type="info" color='#07c160' native-type="submit">提交</van-button>
    </div> -->

    <div class="footer">
    <van-tabbar v-model="active" active-color="#4fc08d" inactive-color="#000" fixed route>
      <van-tabbar-item replace  icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item replace  icon="search" >发布</van-tabbar-item>
      <van-tabbar-item replace  icon="friends-o"  to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
  </div>
</template>

<script>
import { Form, Field ,Tabbar} from 'vant';
import { Picker, Popup ,Uploader } from 'vant';
import {addArticle,getUploadToken,uploadQiniu} from '@/api/api'
import {mapState , mapActions} from 'vuex'
export default {
  name:'publish',
  data(){
    return{
     title:'',
     cate_id:'',
     content:'',
     cate_name:'',
     catePickerShow:false,
    fileList:[],// vant上传组件 接收数据
     active:'1',
    }
  },
   computed:{
     ...mapState(['cate','uid','userInfo']),

  },
  created(){
    this.$store.dispatch('getCate')
  },
  components:{
    [Form.name]:Form,
    [Field.name]:Field,
    [Tabbar.name]:Tabbar,
    [Uploader.name]:Uploader,
    [Picker.name]:Picker,
    [Popup .name]:Popup ,
   
  },
   methods: {
    ...mapActions(['upload']),
    //picker确定
    onConfirm(e){
      // console.log(e)
      this.catePickerShow = false;
      this.cate_name = e.name
      this.cate_id = e._id
    },
    //上传
    // async upload(fileList){
    //   //1.判断一下 选了图片

    //   let imageSrc  = [];

    //   if(!fileList || fileList.length ===0){
    //     //没上传图片
    //     return imageSrc
    //   }
    //  //多个异步任务都执行完成  返回她们完成后的结果
    //   let task = fileList.map(v=>{
    //     return new Promise(async (resolve,reject)=>{
    //       let {file} = v
    //       let {type} = file;
    //       //拿到类型
    //       type = type.split('/')[1];
    //       //重新命名 随机名字
    //       let file_name = `${new Date().getTime()}_${Math.random()
    //         .toString(36)
    //         .slice(2)}.${type}`;
    //     //去服务器申请一个上传token
    //      let { token } = await getUploadToken();

    //      console.log(token)

    //     const formdata = new FormData();
    //       formdata.append("file", file);
    //       formdata.append("token", token);
    //       formdata.append("key", file_name);

    //       uploadQiniu(formdata).then((res) => {
    //         console.log(res);
    //         resolve(`http://toutiao.longxiaokj.com/` + res.key);
    //       });
    //     })
    //   })
    //    imageSrc = await Promise.all(task);

    //   return imageSrc;
    // },
    async onSubmit(values) {
      // console.log("submit", values);

      let {cate_id,uid,userInfo,fileList} = this;
      let {nickname} = userInfo
      
      // console.log(cate_id)
      // console.log(uid)
      // console.log(nickname)
      
//需要把file传到服务器 服务器收到以后存到服务器 返回该图片在服务器的地址
      if(!uid){
        this.$toast('请先登录')
        setTimeout(v=>{
          this.$router.push('/login')
        },500)
        return
      }

    //上传图片的操作

    let imageSrc = await this.upload(fileList)
    console.log(imageSrc)
    delete values.fileList;
    addArticle({
      ...values,
      cate_id,
      author:nickname,
      author_id:uid,
      imageSrc
    }).then(res=>{
      console.log(res)
    })
    },
   
  },
}
</script>

<style lang="less">
  
</style>